<template>
    <div>
        <div v-for="(goods, i) in collection" :key="i" class="collection-wrapper">
            <GoodsItem :goods="handleGoods(goods)"></GoodsItem>
        </div>
        <div class="middle-loading-tip" v-show="page1Loading">加载中…</div>
        <div class="nothing-tip" v-show="noData">暂无任何数据</div>
        <LoadMore :bottomMethod="toBottom" :allLoaded="allLoaded"></LoadMore>
    </div>
</template>
<script>
import GoodsItem from '@/components/GoodsItem2'
import LoadMore from '@/components/LoadMore'
import { mapGetters, mapActions } from 'vuex'
import { Indicator } from 'mint-ui'
export default {
  name: 'Collection',
  created() {
      this.firstPage()
  },
  data(){
      return {
          page: 0,
          page1Loading: false,
          allLoaded: false
      }
  },
  computed:{
      ...mapGetters({
          collection: 'goods/collection',
      }),
      noData(){
          return !this.collection.length && !this.page1Loading
      }
  },
  methods:{
       ...mapActions({
            getCollection: 'goods/getCollection'
        }),
        async firstPage(){
            this.page1Loading = true
            await this.nextPage()
            this.page1Loading = false            
        },
        async nextPage(){
            this.page++
            const data = await this.getCollection(this.page)
            if(!data.length && this.page > 1) this.allLoaded = true
            console.log(`page:${this.page}`)      
        },
        async toBottom(){
            await this.nextPage()
        },
        handleGoods(goods){
            return {
             ...goods,
            cover_pic:goods.picture,
            pre_goods_id:goods.goods_id
            }
        }
  },
// 在vuex也存一份page 这里就不用destroy collection了
// vuex来判断传过去的page是否比存的page大，大则更新page并加载，否则则不理
// 这样可以避免重复加载内容
  components: { LoadMore, GoodsItem }
}
</script>

<style lang="less" scoped>
.collection-wrapper{
    padding-right: .2rem;
    border-bottom: 1px solid grey;
    background: #fff;
}
</style>


